/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>职员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-button-group>
              <el-button size="medium" type="primary" @click="addUser" >新增</el-button>
              <el-button size="medium" type="danger" @click="enableUser">启用</el-button>
              <el-button size="medium" type="danger" @click="disableUser">停用</el-button>
              <el-button size="medium" type="danger" @click="relieveFreeze">解除冻结</el-button>
              <el-button size="medium" type="danger" @click="deleteUser">移除选中</el-button>
            </el-button-group>
          </el-col>
          <el-col :span="8">
            <!-- 搜索筛选 -->
            <el-form :inline="true" :model="queryCondition">
              <el-form-item label="搜索：">
                <el-input size="small" v-model="queryCondition.userCodeOrName" placeholder="请输入用户编码或姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-table
          :data="userTableData"
          style="width: 100%;"
          height="500"
          @selection-change="handleSelectionChange">
          <el-table-column
            fixed
            align="center"
            type="selection"
            width="60">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
          prop="userCode"
          label="职员编码"
          width="100">
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门名称">
          </el-table-column>
          <el-table-column
            align="center"
            label="联系方式">
            <el-table-column
              prop="phone"
              label="手机号"
            width="120">
            </el-table-column>
            <el-table-column
              prop="telephone"
              label="座机"
              width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="enableStatus"
            label="业务状态">
            <template slot-scope="scope">
              <span>{{scope.row.enableStatus == 1?'启用'
                :scope.row.enableStatus == 2?'停用'
                :scope.row.enableStatus == 3?'注销'
                :scope.row.enableStatus == 4?'冻结'
                :scope.row.enableStatus == 5?'锁定':''}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="loginName"
            label="登录名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="isDefaultPassword"
            label="是否初始密码"
            width="120">
            <template slot-scope="scope">
              <span>{{scope.row.isDefaultPassword == 1?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            sortable
            width="200">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span>{{scope.row.createTime|timestampToTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="300">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="resetPwd(scope.$index, scope.row)"
                type="text"
                size="small">
                重置密码
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
      </el-main>
    </el-container>
    <!-- 新增用户对话框 -->
    <el-dialog
      title="新增用户"
      :visible.sync="centerDialogVisible"
      center
      width="70%">
      <el-form ref="form"
               :rules="rules"
               :model="userForm"
               label-width="100px"
               label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="职员姓名" prop="userName">
              <el-input placeholder="职员姓名" v-model="userForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input maxlength="11" placeholder="手机号" v-model="userForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="登录账号" prop="loginName">
              <el-input placeholder="登录账号" v-model="userForm.loginName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职员编码">
              <el-input placeholder="职员编码" v-model="userForm.userCode" disabled></el-input>
            </el-form-item>
            <el-form-item label="座机">
              <el-input placeholder="座机" v-model="userForm.telephone"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" >
              <el-switch v-model="userForm.enableStatus"
                         active-value="1"
                         inactive-value="2"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input rows="3" type="textarea" v-model="userForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cleanAddUser">取 消</el-button>
        <el-button type="primary" @click="submitAddUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {Get, Post} from "../../api/axiosFun";
import Pagination from '../../components/Pagination'

export default {
  data() {
    return {
      userTableData: [],
      handleSelectionData: [],

      queryCondition:{
        pageIndex: 0,
        pageSize: 10,
        userCodeOrName: ''
      },

      centerDialogVisible: false,
      userForm:{
        userName: '',
        phone: '',
        userCode: '',
        loginName: '',
        telephone: '',
        enableStatus: '',
        remark: ''
      },

      // rules表单验证
      rules: {
        userName: [
          { required: true, message: '请输入职员姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        loginName: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
      },

      //分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },

  //注册组件
  components:{
    Pagination
  },

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据
    getdata() {
      Get("/officeSystem/user/selectByCondition", this.queryCondition)
      .then(result => {
        this.userTableData = result.data.resultList;
        this.pageparm.total = result.data.totalCount;
      })
    },
    //分页插件事件
    pageCallFather(param){
      this.queryCondition.pageIndex = param.currentPage - 1;
      this.queryCondition.pageSize = param.pageSize;
      this.getdata();
    },

    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },

    //重置密码
    resetPwd(index, row){
      this.$confirm('此操作将重置该用户登录密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Post("/officeSystem/user/resetPwd", {
          id: row.id,
          isDefaultPassword: 1
        }).then(result => {
          if(result.status == 200){
            this.$message.success(result.message);
            this.getdata();
          }else{
            this.$message.error(result.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        });
      });
    },

    //新增用户
    addUser(){
      Get("/officeSystem/user/getUserCount")
      .then(result => {
        if(result.status == 200){
          this.userForm.userCode = '0000' + (result.data + 1);
          this.centerDialogVisible = true;
        }else{
          this.$message.error("获取用户编码失败");
        }
      })
    },

    //启用用户
    enableUser(){
      if(this.handleSelectionData.length == 0){
        this.$message.warning("请选择要启用的用户");
        return;
      }
      let list = [];
      for (let i=0; i<this.handleSelectionData.length; i++){
        if(this.handleSelectionData[i].enableStatus != 2){
          this.$message.warning("只能启用已停用的用户，请重新选择");
          return
        }
        let user = {};
        user.id = this.handleSelectionData[i].id;
        user.enableStatus = 1;
        list.push(user);
      }
      Post("/officeSystem/user/updateByList",{
        params: JSON.stringify(list)
      }).then(result => {
        if (result.status == 200){
          this.$message.success(result.message);
          this.getdata(this.formInline)
        }else {
          this.$message.success(result.message);
        }
      })
    },

    //停用
    disableUser(){
      if(this.handleSelectionData.length == 0){
        this.$message.warning("请选择要停用的用户");
        return;
      }
      let list = [];
      for (let i=0; i<this.handleSelectionData.length; i++){
        let user = {};
        user.id = this.handleSelectionData[i].id;
        user.enableStatus = 2;
        list.push(user);
      }
      Post("/officeSystem/user/updateByList",{
        params: JSON.stringify(list)
      }).then(result => {
        if (result.status == 200){
          this.$message.success(result.message);
          this.getdata(this.formInline)
        }else {
          this.$message.success(result.message);
        }
      })
    },

    //解除冻结
    relieveFreeze(){
      if(this.handleSelectionData.length == 0){
        this.$message.warning("请选择要解除冻结的用户");
        return;
      }
      let list = [];
      for (let i=0; i<this.handleSelectionData.length; i++){
        if(this.handleSelectionData[i].enableStatus != 4){
          this.$message.warning("只能解除已冻结的用户，请重新选择");
          return
        }
        let user = {};
        user.id = this.handleSelectionData[i].id;
        user.enableStatus = 1;
        list.push(user);
      }
      Post("/officeSystem/user/updateByList",{
        params: JSON.stringify(list)
      }).then(result => {
        if (result.status == 200){
          this.$message.success(result.message);
          this.getdata(this.formInline)
        }else {
          this.$message.success(result.message);
        }
      })
    },

    //移除选中
    deleteUser(){
      if(this.handleSelectionData.length == 0){
        this.$message.warning("请选择要移除的用户");
        return;
      }
      this.$confirm('此操作将永久删除选中用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let list = [];
        for (let i=0; i<this.handleSelectionData.length; i++){
          let user = {};
          user.id = this.handleSelectionData[i].id;
          user.dr = 1;
          list.push(user);
        }
        Post("/officeSystem/user/updateByList",{
          params: JSON.stringify(list)
        }).then(result => {
          if (result.status == 200){
            this.$message.success(result.message);
            this.getdata(this.formInline)
          }else {
            this.$message.success(result.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消移除'
        });
      });
    },

    handleSelectionChange(val){
      this.handleSelectionData = val;
    },

    cleanAddUser(){
      this.centerDialogVisible = false;
      this.userForm = {
          userName: '',
          phone: '',
          userCode: '',
          loginName: '',
          telephone: '',
          enableStatus: '',
          remark: ''
      }
    },
    submitAddUser(){
      Post("/officeSystem/user/register", this.userForm)
      .then(result => {
        if(result.status == 200){
          this.centerDialogVisible = false;
          this.userForm = {
            userName: '',
            phone: '',
            userCode: '',
            loginName: '',
            telephone: '',
            enableStatus: '',
            remark: ''
          }
          this.$message.success(result.message);
          this.getdata();
        }else{
          this.$message.error(result.message);
        }
      })
    },

  }
}
</script>

<style>

</style>

